<template>
  <div class="mybg">
    <van-nav-bar>
      <van-icon class="My-icon" name="wap-nav" slot="left" @click="childShow" />
    </van-nav-bar>
    <!--账号弹层
     -->
    <account-number :show.sync="show" @upshow="gai" />
    <!-- 设置弹层 -->
    <set-up :setupShow.sync="setupShow" @guanbi="guan"></set-up>

    <van-card class="head" v-if="userInfo" @click="$router.push('/PersonalDetails')">
      <template #thumb>
        <div class="yyqx">
          <img :src="userInfo.avatarUrl" alt="" />
        </div>
      </template>
      <template #desc>
        <span class="Login">
          {{ userInfo.nickname }}
          <van-icon name="arrow" />
        </span>
      </template>
    </van-card>
    <van-card class="head" v-else>
      <template #thumb>
        <van-icon
          class="portrait"
          name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
        />
      </template>
      <template #desc>
        <span class="Login" @click="tiao">
          立即登录
          <van-icon name="arrow" />
        </span>
      </template>
    </van-card>
    <van-grid class="table">
      <van-grid-item
        @click="haoyou"
        class="icon"
        icon="friends"
        text="我的好友"
      />
      <van-grid-item
        class="icon"
        icon="play-circle"
        to="/Mylike"
        text="最近播放"
      />
      <van-grid-item class="icon" icon="star" text="收藏和赞" />
      <van-grid-item class="icon" icon="add" text="音乐应用" />
    </van-grid>
    <van-card
      class="my-love"
      v-for="(item, index) in list1"
      :key="index"
      :thumb="item.coverImgUrl"
      :title="item.name"
      @click="clickCol(item)"
    >
      <!-- <template #title>
        {{ item.name }}
      </template> -->
      <template #price> {{ item.trackCount }}首 </template>
    </van-card>
    <van-tabs class="tabs" v-model="active">
      <van-tab title="创建歌单"></van-tab>
      <van-tab title="收藏歌单"></van-tab>
      <van-tab title="歌单助手"></van-tab>
    </van-tabs>
    <div class="found">
      <van-cell-group>
        <van-cell>
          <van-row type="flex" justify="space-between">
            <van-col><span class="foundhead">创建歌单</span></van-col>
            <van-col>
              <van-icon name="plus" />
            </van-col>
          </van-row>
        </van-cell>
      </van-cell-group>
      <div class="cj" v-for="(item, index) in list2" :key="index">
        <van-row @click="clickCol(item)">
          <van-col span="6" type="flex" justify="center" align="center">
            <div class="Playlist">
              <img :src="item.coverImgUrl" alt="" />
            </div>
          </van-col>
          <van-col span="12">
            <span>{{ item.name }}</span>
            <span class="zongshu">{{ item.trackCount }}首</span>
          </van-col>
        </van-row>
      </div>
      <!-- <van-col><span class="foundhead">收藏歌单</span></van-col> -->
    </div>
    <div class="found">
      <van-cell-group>
        <van-cell>
          <van-row type="flex" justify="space-between">
            <van-col><span class="foundhead">收藏歌单</span></van-col>
            <van-col>
              <van-icon name="plus" />
            </van-col>
          </van-row>
        </van-cell>
      </van-cell-group>
      <div class="cj" v-for="(item, index) in list3" :key="index">
        <van-row @click="clickCol(item)">
          <van-col span="6" type="flex" justify="center" align="center">
            <div class="Playlist">
              <img :src="item.coverImgUrl" alt="" />
            </div>
          </van-col>
          <van-col span="12">
            <span>{{ item.name }}</span>
            <span class="zongshu">{{ item.trackCount }}首</span>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 歌单详细 -->
    <list-components
      :ListComponentsShow.sync="ListComponentsShow"
      :id="id"
    ></list-components>
  </div>
</template>

<script>
import { getUserSong } from '@/api/user'
import { mapGetters } from 'vuex'
import AccountNumber from '@/views/Home/commponent/AccountNumber'
import setUp from '../Home/commponent/SetUp'
export default {
  // components: {
  //   ChannelEdit,
  //   ChannelAdit
  // },
  data () {
    return {
      active: 0,
      list1: [],
      list2: [],
      list3: [],
      show: false,
      setupShow: false,
      id: 0,
      ListComponentsShow: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  components: {
    AccountNumber,
    setUp
  },
  created () {
    this.getUserSong()
  },
  mounted () {},
  methods: {
    async getUserSong () {
      const { playlist } = await getUserSong(this.userInfo.userId)
      console.log(playlist)
      playlist.forEach((item, index) => {
        if (index < 1) {
          this.list1.push(item)
        } else if (item.userId === this.userInfo.userId) {
          this.list2.push(item)
        } else {
          this.list3.push(item)
        }
      })
      console.log(this.list1)
      console.log(this.list2)
      console.log(this.list3)
    },
    tiao () {
      this.$router.push('/Login')
    },
    childShow () {
      this.show = true
    },
    gai (data) {
      this.setupShow = data
      console.log(this.setupShow)
    },
    guan (data) {
      this.setupShow = data
      this.show = data
    },
    jump () {
      this.$router.push('/like')
    },
    haoyou () {
      this.$router.push('/Friends')
    },
    clickCol (item) {
      this.id = item.id
      this.ListComponentsShow = true
    }
  }
}
</script>

<style scoped lang="less">
body {
  background: #eee;
}
.mybg {
  background: #eee;
  padding: 10px;
  margin-bottom: 88px;

  .My-icon {
    font-size: 50px;
    color: black;
  }
  .portrait {
    vertical-align: middle;
    font-size: 95px;
  }
  .head {
    width: 100%;
    height: 160px;
    line-height: 160px;
    margin-top: 10px;
    padding: 25px;
    border-radius: 10px;
    .Login {
      font-size: 36px;
      font-weight: 800;
      line-height: 100px;
    }
    .van-card__thumb {
      width: 120px;
      height: 120px;
      margin: 20px;
      .yyqx {
        width: 100px;
        height: 100px;
        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .van-card__header {
    line-height: 20px;
  }
  /deep/.my-love {
    height: 150px;
    border-radius: 15px;
    margin-bottom: 20px;
    .van-card__header {
      height: 150px;
    }
    .van-card__title {
      font-size: 30px;
      margin-top: 5px;
      color: #000;
    }
    .van-card__content {
      min-height: 75px !important;
      height: 85px;
    }
    .van-card__thumb {
      height: 120px;
      width: 120px;
      .van-image {
        width: 120px;
        height: 120px;
        border-radius: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .table {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    .icon {
      color: #ee0a24;
    }
  }
  .song {
    vertical-align: middle;
  }
  .tabs {
    margin-top: 20px 0;
  }
  .found {
    background: white;
    .foundhead {
      font-size: 16px;
      color: #999;
    }
    .cj {
      .van-row {
        height: 150px;
        margin-bottom: 10px;
        .Playlist {
          height: 120px;
          width: 120px;
          img {
            border-radius: 15px;
            height: 100%;
            width: 100%;
          }
        }
        span {
          font-size: 30px;
          overflow: hidden;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        .van-col--12 {
          height: 75px;
          .zongshu {
            font-size: 20px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
